<template>
  <div class="dashboard-container">
    <el-card class="myCard">
      <!-- tabs结构 -->
      <el-tabs>
        <el-tab-pane style="font-size:16px" label="组织结构"></el-tab-pane>
      </el-tabs>
      <!-- 结构架构 -->
      <div class="box">
        <!-- 结构头部 -->
        <treetool :item="topItem" :isTop="true"></treetool>
        <hr />
        <!-- 树状结构 -->
        <el-tree :data="list" default-expand-all>
          <treetool slot-scope="{ data }" :item="data"></treetool>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDepartmentsApi } from '@/api/departments'
export default {
  data () {
    return {
      list: [],
      topItem: {}
    }
  },
  methods: {
    async getDepartments () {
      const res = await getDepartmentsApi()
      console.log(res)
      this.list = this.turnData(res.depts, '')
      this.topItem = { ...res.depts[0], manager: '负责人' }
    },
    turnData (arr, pid) {
      let newArr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          let children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          newArr.push(item)
        }
      })
      return newArr
    }
  },
  components: {
    treetool: () => import('./components/tree-tool.vue')
  },
  created () {
    this.getDepartments()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 20px;
  .myCard {
    padding: 10px;
    .el-tabs__item {
      font-size: 16px;
    }
    .box {
      padding: 20px 30px;
      margin-top: 20px;
    }
  }
}
</style>
